// Addition of specific styles to bring elements into visual likeness with PF4
// These are either components we don't currently use or that our current
// markup structure doesn't align with PF4 so we must apply through targeted css

// Assigning PF component specific variables globally so we can use
:root {
  --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
  --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
  --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
}

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--pf-global--FontFamily--heading--sans-serif);
    font-weight: var(--pf-global--FontWeight--normal);
    line-height: var(--pf-global--LineHeight--md);
    margin-bottom: var(--pf-global--spacer--sm);
    word-break: break-word;
  }

  h1 {
    font-size: var(--pf-global--FontSize--2xl);
    line-height: var(--pf-global--LineHeight--sm);
  }

  h2 {
    font-size: var(--pf-global--FontSize--xl);
  }

  h3 {
    font-size: var(--pf-global--FontSize--lg);
  }

  h4, h5, h6 {
    font-size: var(--pf-global--FontSize--md);
  }

  // Override PF4 inheritance
  button, input, optgroup, select, textarea,
  .pf-c-badge {
    font-family: var(--pf-global--FontFamily--sans-serif);
  }

  pre {
    background-color: var(--pf-c-code-block--BackgroundColor);
    color: var(--pf-global--Color--100);
    font-family: var(--pf-c-code-block__pre--FontFamily);
    font-size: var(--pf-c-code-block__pre--FontSize);
    overflow-wrap: break-word;
    padding: var(--pf-global--spacer--md);
    white-space: pre-wrap;
    display: block;
  }

